<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改地址</title>
		<!--字体图标-->
		<link href="../../lib/javaex/pc/css/icomoon.css" rel="stylesheet" />
		<!--动画-->
		<link href="../../lib/javaex/pc/css/animate.css" rel="stylesheet" />
		<!--骨架样式-->
		<link href="../../lib/javaex/pc/css/common.css" rel="stylesheet" />
		<!--皮肤-->
		<link href="../../lib/javaex/pc/css/skin/default.css" rel="stylesheet" />
		<!--jquery，不可修改版本-->
		<script src="../../lib/javaex/pc/lib/jquery-1.7.2.min.js"></script>
		<!--核心组件-->
		<script src="../../lib/javaex/pc/js/javaex.min.js"></script>
		<!--表单验证-->
		<script src="../../lib/javaex/pc/js/javaex-formVerify.js"></script>
		<script src="../../js/config.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" href="../../lib/province/css/pick-pcc.min.1.0.1.css">
		<script type="text/javascript" src="../../lib/province/js/pick-pcc.min.1.0.1.js"></script>
		<style type="text/css">
			.container {
				width: 400px;
				margin: 50px auto 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<form id="form">
				<!--文本框-->
				<div class="javaex-unit clear">
					<div class="javaex-unit-left">
						<p class="subtitle required">收货人姓名</p>
					</div>
					<div class="javaex-unit-right">
						<input id="name" name="name" type="text" data-type="chinese" error-msg="暂不支持英文"
							class="javaex-text" placeholder="长度不超过25个字符" />
					</div>
				</div>

				<!--下拉选择框-->
				<div class="javaex-unit clear">
					<div class="javaex-unit-left">
						<p class="subtitle required">地址信息:</p>
					</div>
					<div class="javaex-unit-right">
						<a href="javascript:void(0)" class="pick-area pick-area1" name="山东省/临沂市/兰陵县"></a>
					</div>
				</div>
				<!--文本框-->
				<div class="javaex-unit clear">
					<div class="javaex-unit-left">
						<p class="subtitle required">详细地址:</p>
					</div>
					<div class="javaex-unit-right">
						<textarea id="address" name="address" data-type="chinese" error-msg="暂不支持英文" class="javaex-desc"
							placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"></textarea>
					</div>
				</div>
				<!--文本框-->
				<div class="javaex-unit clear">
					<div class="javaex-unit-left">
						<p class="subtitle">邮政编码:</p>
					</div>
					<div class="javaex-unit-right">
						<input id="code" name="code" type="text" class="javaex-text" placeholder="请填写邮编" />
					</div>
				</div>
				<!--文本框-->
				<div class="javaex-unit clear">
					<div class="javaex-unit-left">
						<p class="subtitle required">手机号码:</p>
					</div>
					<div class="javaex-unit-right">
						<input id="phone" name="phone" type="text" data-type="phone" error-msg="手机号格式错误"
							class="javaex-text" placeholder="请填写正确的手机号码" />
					</div>
				</div>

				<!--提交按钮-->
				<div class="javaex-unit clear tc">
					<input type="button" id="save" class="javaex-btn yes" value="保存" />
				</div>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		var address;
		window.onload = function() {
			var id = sessionStorage.getItem("updateAddressId");
			javaex.loading({
				mode: "manual",
				containerId: "form",
				type: "open"
			});
			$.ajax({
				type: "post",
				//后端需要调用的地址
				url: "http://" + getAddressHost() + "/address/selById",
				dataType: "json",
				data: {
					id: id
				},
				timeout: 10000,
				async: true,
				success: function(res) {
					console.log(res)
					if (res.code == 200) {
						javaex.tip({
							content: "操作成功",
							type: "success"
						});
						address = JSON.parse(res.address);
						init();
						// 建议延迟加载
						javaex.loading({
							mode : "manual",
							containerId: "form",
							type : "close"
						});
						setTimeout(function() {}, 1000);

					} else {
						javaex.tip({
							content: "操作失败",
							type: "error"
						});
					}
				},
				error: function(res) {
					javaex.tip({
						content: "操作失败",
						type: "error"
					});
				}
			});
		}

		function init() {
			javaex.form({
				id: "form", // 表单form的id
				formData: {
					"name": address.name,
					"address": address.address,
					"code": address.code,
					"phone": address.phone,
				},
				callback: function() {
					// 渲染完成了，做点什么吧
					$(".pick-area1").pickArea({
						"format": address.province + "/" + address.city + "/" + address.district, //格式
						"width": "310",
						"borderColor": "#CCCCCC", //文本边框的色值
						"arrowColor": "#CCCCCC", //箭头颜色
						"listBdColor": "#CCCCCC", //下拉框父元素ul的border色值
						"color": "#1B9AEE", //字体颜色
						"fontSize": "13px", //字体大小
						"hoverColor": "#1B9AEE",
						"paddingLeft": "10px",
						"arrowRight": "10px",
						"preSet": address.province + "/" + address.city + "/" + address.district
					});
					$(".pick-area-hidden").val(address.province + " " + address.city + " " + address.district)
				}
			});

		}
		// 监听点击保存按钮事件
		$("#save").click(function() {
			console.log(address)
			// 表单验证函数
			var code = $("#code").val().trim();
			if (javaexVerify()) {
				var arr = $(".pick-area-hidden").val().split(" ");
				console.log(arr);
				var name = $("#name").val().trim();
				var address = $("#address").val().trim();
				var code = $("#code").val().trim();
				var phone = $("#phone").val().trim();
				if (arr.length == 3 && ((code != null && code != "") ? code.length == 6 : true)) {
					javaex.tip({
						content: "数据提交中，请稍候...",
						type: "submit"
					});
					$.ajax({
						type: "post",
						//后端需要调用的地址
						url: "http://" + getAddressHost() + "/address/update",
						dataType: "json",
						data: {
							"province": arr[0],
							"city": arr[1],
							"district": arr[2],
							"address": address,
							"code": code,
							"phone": phone,
							"id": sessionStorage.getItem("updateAddressId"),
							"name": name
						},
						timeout: 10000,
						async: true,
						success: function(res) {
							console.log(res)
							if (res.code == 200) {
								javaex.tip({
									content: "操作成功",
									type: "success"
								});
								// 建议延迟加载
								setTimeout(function() {
									parent.location.reload();
								}, 1000);
							} else {
								javaex.tip({
									content: "操作失败",
									type: "error"
								});
							}
						},
						error: function(res) {
							javaex.tip({
								content: "操作失败",
								type: "error"
							});
						}
					});
				} else {
					javaex.alert({
						content: "请确认信息填写无误"
					});
				}
			}
		});

		function toshopCar(){
			window.location.href = "shopCar.html";
		}

		function toaddAddress(){
			window.location.href = "addAddress.html";
		}

		function toupdateAddress(){
			window.location.href = "updateAddress.html";
		}
	</script>
</html>
